<template>
  <view class="layout layout-column">
    <van-sticky>
      <van-nav-bar
        :placeholder="true"
        title="维修申请"
        left-arrow
        @click-left="back"
      >
        <template #right>
          <van-button
            type="primary"
            @click="onSubmit"
            class="layout-btn"
            size="small"
            >提交</van-button
          >
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="van-list">
      <van-form>
        <van-field
          v-model="dataForm.equipName"
          name="equipName"
          label="设备名称"
          required
          readonly
        />
        <van-field
          v-model="dataForm.equipCode"
          name="equipName"
          label="设备编码"
          required
          readonly
        />
        <van-field
          v-model="dataForm.faultClassifyName"
          name="faultClassifyName"
          label="故障分类"
          required
          readonly
        />
        <van-field
          v-model="dataForm.emergency"
          name="emergency"
          label="紧急度"
          required
          readonly
        />
        <van-field
          name="faultRemark"
          rows="1"
          autosize
          type="textarea"
          v-model="dataForm.faultRemark"
          label="故障描述"
        />
        <van-field
          v-model="dataForm.classifyName"
          name="classifyName"
          label="维修分类"
          is-link
          readonly
          @click="show = true"
        />
        <van-field
          v-model="dataForm.userLabelList"
          name="userLabelList"
          label="维修人员"
          is-link
          required
          readonly
          @click="userShow = true"
        />
        <van-field
          readonly
          clickable
          name="startTime"
          required
          v-model="dataForm.startTime"
          label="开始时间"
          is-link
          @click="onChangeTime('startTime')"
        />
        <van-field
          readonly
          clickable
          name="endTime"
          required
          v-model="dataForm.endTime"
          label="结束时间"
          is-link
          @click="onChangeTime('endTime')"
        />
        <!-- <van-field name="repairHours" required label="维修工时">
          <template #input>
            <div class="stepper">
              <van-stepper
                theme="round"
                button-size="22"
                input-width="60px"
                v-model="dataForm.repairHours"
              />
              <span>小时</span>
            </div>
          </template>
        </van-field> -->
        <van-field
          v-model="dataForm.repairHours"
          name="repairHours"
          label="维修工时"
          required
        >
          <template #right-icon>小时</template>
        </van-field>
        <van-field
          v-model="dataForm.repairCost"
          name="repairCost"
          label="维修成本"
          required
        >
          <template #right-icon>元</template>
        </van-field>
        <van-field name="isSolve" required label="是否解决">
          <template #input>
            <van-switch
              :active-value="1"
              :inactive-value="0"
              v-model="dataForm.isSolve"
              size="20"
            />
          </template>
        </van-field>
        <van-field
          name="faultAnalysis"
          rows="2"
          autosize
          type="textarea"
          v-model="dataForm.faultAnalysis"
          label="故障分析"
        />
        <van-field
          name="repairMatters"
          rows="2"
          autosize
          type="textarea"
          v-model="dataForm.repairMatters"
          label="维修事项"
        />
      </van-form>
    </div>
    <!-- 维修分类 -->
    <van-popup v-model:show="show" position="bottom">
      <van-picker
        title="维修分类"
        :columns="columns"
        :columns-field-names="customFieldName"
        @confirm="onConfirmClass"
        @cancel="show = false"
      />
    </van-popup>
    <!-- 维修人员 -->
    <MultiplePicker
      title="维修人员"
      :show="userShow"
      :columns="userList"
      @confirm="onConfirmUser"
      :defaultIndex="defaultIndex"
      @cancel="userShow = false"
    />
    <van-popup v-model:show="showPicker" position="bottom">
      <van-datetime-picker
        @confirm="confirm"
        @cancel="showPicker = false"
        v-model="checkTime"
        type="datetime"
        title="点检时间"
        :min-date="minDate"
      />
    </van-popup>
  </view>
</template>
    
<script>
import { getGroupUser, report, getClassify } from "@/api/home.js";
import { mapGetters, mapMutations } from "vuex";
import { Notify, Toast, Dialog } from "vant";
import dayjs from "dayjs";
import MultiplePicker from "../maintain/multiple-picker";
export default {
  components: { MultiplePicker },
  data() {
    return {
      loading: false,
      show: false,
      userShow: false,
      showPicker: false,
      timeType: "",
      customFieldName: {
        text: "classifyName",
        values: "id",
      },
      defaultIndex: [],
      value: "",
      dataForm: {
        startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      },
      checkTime: new Date(),
      minDate: new Date(2024,0,1),
      list: [],
      userList: [],
      columns: [],
      repairClassData: [],
      userAssign: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo", "dataRow"]),
  },
  onLoad() {
    this.dataForm.checkBy = this.userInfo.userId;
    this.dataForm.checkUserName = this.userInfo.userName;
    this.getUserList(this.dataRow.groupId);
    this.getRepairClass();
    this.dataForm = {
      ...this.dataRow,
    };
  },
  mounted() {},
  methods: {
    async getUserList(groupId) {
      const res = await getGroupUser(groupId);
      this.userList = res.data.map((item) => {
        return {
          ...item,
          name: item.userName,
          id: item.userId,
        };
      });
    },
    async getRepairClass() {
      const res = await getClassify();
      this.repairClassData = res.data;
      this.columns = res.data.map((item) => item.classifyName);
    },

    back() {
      history.back();
    },
    onSubmit() {
      Dialog.confirm({
        title: "提示",
        message: "是否确认提交？",
      }).then(async () => {
        await report({
          ...this.dataForm,
          isReport: 1,
        });
        Toast.success("提交成功！");
        history.back();
      });
    },
    onConfirmClass(classifyName) {
      const id = this.repairClassData.find(
        (item) => item.classifyName == classifyName
      )?.id;
      this.dataForm.classifyName = classifyName;
      this.dataForm.repairClassifyId = id;
      this.show = false;
    },
    onChangeTime(type) {
      this.timeType = type;
      this.showPicker = true;
    },
    confirm(date) {
      this.dataForm[this.timeType] = dayjs(date).format("YYYY-MM-DD HH:mm:ss");
      this.showPicker = false;
    },
    onConfirmUser(data) {
      if (data.value.length) {
        this.defaultIndex = data.value;
        this.dataForm.userLabelList = data.value.join(",");
        this.dataForm.userList = data.selected.map((item) => {
          return {
            userName: item.label,
            userId: item.value,
          };
        });
      } else {
        this.defaultIndex = [];
        this.dataForm.userLabelList = [];
        this.dataForm.userList = [];
      }
      this.userShow = false;
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.home {
  height: calc(100% - var(--van-tabbar-height));
  padding: 10px;
}
</style>
    